Gradient Horizontal Rules

Starting out quite simply, you can make the line a gradient from transparent on the sides to a solid color in the center.

.markdown-source-view hr,
.markdown-preview-view hr {
  margin-block-start: 2em;
  margin-block-end: 2em;
  border: none;
  height: 1px;;
  background-image: linear-gradient(to right, var(--background-primary), tan, yellow, #e6d265, yellow, tan, var(--background-primary));
}

.markdown-source-view hr::before, 
.markdown-preview-view hr::before {
  content: '🙤x🙦'; /* '🙦 🙤' */
  color: #e6d265; /* #e6d265; */
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -55%);
  transform-origin: 50% 50%;
  padding: none;
  background-color: var(--background-primary);
}
Copy

Add Obsidian Custom Logo

.markdown-rendered hr, .cm-line.hr hr {
    height: 2px;
    background-image: linear-gradient(to right, transparent, var(--hr-color) 46.2%, transparent 46.2%, transparent 54%, var(--hr-color) 54%, transparent);
    border: none;
    position: relative;
    overflow: visible;
}

.markdown-source-view.mod-cm6, hr {
    margin-block-start: 3em;
    margin-block-end: 3em;
    flex: 1 0 0;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0px;
}

.markdown-source-view:not(.is-live-preview) .HyperMD-hr::after, .markdown-rendered hr::after, .cm-line.hr hr::after {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--obsidian-logo-small);
}
Copy